<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/21
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>结算页面</title>

    <link href="${path}/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>

    <link href="${path}/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="${path}/css/cartstyle.css" rel="stylesheet" type="text/css"/>

    <link href="${path}/css/jsstyle.css" rel="stylesheet" type="text/css"/>
    <!-- layui使用的样式-->
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">
    <!-- layui的js -->
    <script src="${path}/layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${path}/js/address.js"></script>

</head>

<body>

<!--顶部导航条 -->
<jsp:include page="header.jsp"></jsp:include>
<div class="concent">
    <!--地址 -->
    <div class="paycont">


        <div class="clear"></div>

        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>确认订单信息</h3>
                <div class="cart-table-th">
                    <div class="wp">

                        <div class="th th-item">
                            <div class="td-inner">商品信息</div>
                        </div>
                        <div class="th th-price">
                            <div class="td-inner">单价</div>
                        </div>
                        <div class="th th-amount">
                            <div class="td-inner">数量</div>
                        </div>


                    </div>
                </div>
                <div class="clear"></div>

                <tr class="item-list">
                    <div class="bundle  bundle-last">

                        <div class="bundle-main">
                            <div class="clear"></div>
                        </div>
                    </div>
                </tr>
                <div class="clear"></div>
            </div>

            <tr id="J_BundleList_s_1911116345_1" class="item-list">
                <div id="J_Bundle_s_1911116345_1_0" class="bundle  bundle-last">
                    <div class="bundle-main">
                        <c:forEach items="${orders.list}" var="o">
                        <ul class="item-content clearfix">
                            <div class="pay-phone">
                                <li class="td td-item">
                                    <div class="item-pic">
                                        <a href="#" class="J_MakePoint">
                                            <img src="${path}${o.pictureurl}"
                                                 class="itempic J_ItemImg"></a>
                                    </div>
                                    <div class="item-info">
                                        <div class="item-basic-info">
                                            <p>${o.goodstitle}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="td td-price">
                                    <div class="item-price price-promo-promo">
                                        <div class="price-content">
                                            <em class="J_Price price-now"> ￥：${o.goodsprice}</em>
                                        </div>
                                    </div>
                                </li>
                            </div>

                            <li class="td td-amount">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <span class="phone-title">购买数量</span>
                                        <div class="sl">
                                            <input class="text_box" name="" type="text" value="${o.goodsnum}"
                                                   style="width:30px;"/>
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                        </c:forEach>
                        <div class="clear"></div>

                    </div>
                </div>
            </tr>
        </div>
        <div class="clear"></div>

        <!--优惠券 -->

        <div class="clear"></div>
    </div>
    <!--含运费小计 -->
    <div class="buy-point-discharge ">
        <p class="price g_price ">
            合计 <span>¥</span><em class="pay-sum">${orders.ordersalary}</em>
        </p>
    </div>

    <!--信息 -->
    <div class="order-go clearfix">
        <div class="pay-confirm clearfix">
            <div class="box">


                <div id="holyshit268" class="pay-address">

                    <p class="buy-footer-address">
                        <span class="buy-line-title buy-line-title-type">寄送至：</span>
                    </p>
                    <%-- <div class="address">--%>

                    <div class="modal-bodyoo">
                        <form id="update_form">
                            <label style="width: 120px;height: 20px;"><label style="width: 30px;"></label>收货人</label>
                            <label id="sureconsigneeusername"><input type="text" name="sureyzm" id="sureusername"
                                                                     placeholder="请输入收件人名字"></label><br/><br>
                            <label style="width: 120px;height: 20px;"><label style="width: 30px;"></label>收货地址</label>
                            <select name="provideId" id="provide">
                                <option value="0">选择省份</option>
                            </select>
                            <select name="cityId" id="cityId">
                                <option value="0">选择城市</option>
                            </select>
                            <br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label style="width: 120px;height: 20px;"><label
                                style="width: 30px;"></label></label>&nbsp;&nbsp;&nbsp;&nbsp;
                            <select name="areaId" id="areaId">
                                <option value="0">选择地区</option>
                            </select>&nbsp;&nbsp;<input type="text" name="sureyzm" id="sureuseraddress"
                                                        placeholder="详细地址：街道/镇，小区，门牌"><br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label style="width: 120px;height: 20px;"><label
                                style="width: 30px;"></label>联系方式</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label
                                id="sureconsigneetel"><input type="text" name="sureyzm" id="sureusertel"
                                                             placeholder="请输入手机号"></label><br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </form>
                    </div>
                    <div class="clear"></div>
                    <ul>
                        <div class="per-border"></div>
                        <div class="per-border"></div>

                    </ul>

                    <div class="clear"></div>
                    <%--</div>--%>
                </div>
            </div>

            <div id="holyshit269" class="submitOrder">
                <div class="go-btn-wrap">
                    <a id="J_Go" href="success.html" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<div class="clear"></div>
</div>
</div>
<div class="footer">

    <div class="footer-bd">
        <p>
            <em>Copyright © 2006-2019 YONGHUI SUPERSTORES, All Rights Reserved小馋猫超市·版权所有 中国福建省厦门市软园24号
                客服中心：86-591-83758880 4000601933</em>
        </p>
    </div>
</div>
</div>
<div class="theme-popover-mask"></div>
<div class="theme-popover">


</div>

<div class="clear"></div>
<script type="text/javascript">

    window.onload = function provinceMessage() {
        $.ajax({
            url: "${path}/province.action/findAllProvince",
            type: "GET",
            dataType: "json",
            success: function (data) {
                var message = data.data
                $('#provide').empty()
                $("#provide").append('<option value ="0">选择省份</option>')
                $("#areaId").empty();
                $("#areaId").append('<option value="0">选择地区</option>');
                $.each(message, function (i) {
                    $('#provide').append('<option value="' + message[i].provinceid + '">' + message[i].provincename + '</option>');
                })
            },
            error: function () {
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;

                    layer.msg("客户端请求异常", {icon: 2, time: 1200});
                })

            }
        })
    }

    //*******************获取城市信息*************
    $('#provide').blur(function () {
        $("#areaId").empty();
        $("#areaId").append('<option value="0">选择地区</option>');
        var i = $(this).val()
        if (i == "" || i == 0) {
            $("#cityId").empty();
            $("#cityId").append('<option value="0">选择城市</option>');
            $("#areaId").empty();
            $("#areaId").append('<option value="0">选择地区</option>');
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage, layer = layui.layer;

                layer.msg("还未选择省份", {icon: 2, time: 1200});
            })
        } else {

            $("#cityId").empty();
            $("#cityId").append('<option value ="0">选择城市</option>')
            $.ajax({
                url: "/city.action/findCityByProNum",
                type: "GET",
                dataType: "json",
                data: {
                    proNum: $(this).val()
                },
                success: function (data) {
                    if (data.code == 0) {//有省份数据
                        var message = data.data
                        $('#cityId').empty()
                        $.each(message, function (i) {
                            $('#cityId').append('<option value="' + message[i].cityid + '">' + message[i].cityname + '</option>');
                        })
                    } else {//没有活动数据，返回错误信息
                        layui.use(['laypage', 'layer'], function () {
                            var laypage = layui.laypage, layer = layui.layer;

                            layer.msg(data.msg, {icon: 2, time: 1200});
                        })

                    }
                },
                error: function () {
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;

                        layer.msg("客户端请求异常", {icon: 2, time: 1200});
                    })

                }
            })
        }
    })
    //*******************获取地区信息*************
    $('#cityId').blur(function () {
        var cit = $(this).val()
        if (cit == "" || cit == 0) {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage, layer = layui.layer;

                layer.msg("还未选择上级城市", {icon: 2, time: 1200});
            })

        } else {

            $("#areaId").empty();
            $("#areaId").append('<option value ="0">选择地区</option>')
            $.ajax({
                url: "/area.action/findAreaByCityNum",
                type: "GET",
                dataType: "json",
                data: {
                    cityNum: $(this).val()
                },
                success: function (data) {
                    if (data.code == 0) {//有省份数据
                        var message = data.data
                        $('#areaId').empty()
                        $.each(message, function (i) {
                            $('#areaId').append('<option value="' + message[i].areaid + '">' + message[i].areaname + '</option>');
                        })
                    } else {//没有活动数据，返回错误信息
                        layui.use(['laypage', 'layer'], function () {
                            var laypage = layui.laypage, layer = layui.layer;

                            layer.msg(data.msg, {icon: 2, time: 1200});
                        })
                    }
                },
                error: function () {
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;

                        layer.msg("客户端请求异常", {icon: 2, time: 1200});
                    })

                }
            })

        }

    })
    $("#sureusertel").blur(function () {
        var tel = $("#sureusertel").val()
        var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
        if (!reg.test(tel)) {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage, layer = layui.layer;
                layer.msg("手机号格式不对", {icon: 2, time: 1200});

            })
        }

    })


</script>
</body>

</html>
